<template>
  <div class="problem-set-card" @click="$emit('click', problemSet.id)">
    <div class="card-decoration"></div>
    
    <div class="card-corner-badge" v-if="problemSet.userRole">
      <span v-if="problemSet.userRole === 'CREATOR'" class="badge-creator">
        <el-icon><StarFilled /></el-icon> 创建者
      </span>
      <span v-else-if="problemSet.userRole === 'MEMBER'" class="badge-member">
        <el-icon><User /></el-icon> 成员
      </span>
    </div>

    <div class="card-header">
      <h3 class="set-title">{{ problemSet.name }}</h3>
    </div>

    <div class="card-body">
      <p class="set-description">{{ problemSet.description || "暂无描述" }}</p>

      <div class="stats-row">
        <div class="stat-item">
          <el-icon class="stat-icon"><UserFilled /></el-icon>
          <span class="stat-value">{{ problemSet.memberCount }}</span>
          <span class="stat-label">成员</span>
        </div>
        <div class="stat-divider"></div>
        <div class="stat-item">
          <el-icon class="stat-icon"><Document /></el-icon>
          <span class="stat-value">{{ problemSet.problemCount }}</span>
          <span class="stat-label">题目</span>
        </div>
        <div class="stat-divider"></div>
        <div class="stat-item">
          <el-icon class="stat-icon" v-if="problemSet.isPublic"><Unlock /></el-icon>
          <el-icon class="stat-icon" v-else><Lock /></el-icon>
          <span class="stat-label">{{ problemSet.isPublic ? '公开' : '私有' }}</span>
        </div>
      </div>
    </div>

    <div class="card-footer">
      <div class="footer-left">
        <el-avatar :size="24" class="creator-avatar">
          {{ problemSet.creatorName?.charAt(0) || 'A' }}
        </el-avatar>
        <span class="creator-name">{{ problemSet.creatorName }}</span>
      </div>
      <div class="footer-right">
        <span class="time">{{ formatDate(problemSet.createdAt) }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { StarFilled, User, UserFilled, Document, Unlock, Lock } from "@element-plus/icons-vue";

defineProps({
  problemSet: {
    type: Object,
    required: true
  }
});

defineEmits(['click']);

const formatDate = (date) => {
  if (!date) return "";
  const d = new Date(date);
  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
};
</script>

<style lang="scss" scoped>
@use "@/styles/base/variables" as *;
@use "@/styles/base/mixins" as *;
@use "sass:color";

.problem-set-card {
  background: white;
  border-radius: $border-radius-lg;
  padding: 0;
  cursor: pointer;
  transition: all $transition-base;
  box-shadow: $box-shadow-sm;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  border: 1px solid $border-color-lighter;

  .card-decoration {
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, rgba($color-primary, 0.05) 0%, rgba($color-primary, 0.02) 100%);
    border-radius: 0 $border-radius-lg 0 80px;
    pointer-events: none;
    transition: all $transition-base;
  }

  .card-corner-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;

    .badge-creator,
    .badge-member {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px 12px;
      border-radius: $border-radius-base;
      font-size: $font-size-xs;
      font-weight: $font-weight-semibold;
      box-shadow: $box-shadow-sm;

      .el-icon {
        font-size: 12px;
      }
    }

    .badge-creator {
      background: linear-gradient(135deg, $color-success 0%, color.adjust($color-success, $lightness: -8%) 100%);
      color: white;
    }

    .badge-member {
      background: white;
      color: $color-primary;
      border: 1px solid $color-primary-light-3;
    }
  }

  &:hover {
    box-shadow: $box-shadow-md;
    transform: translateY(-4px);
    border-color: $color-primary-light-3;

    .card-decoration {
      background: linear-gradient(135deg, rgba($color-primary, 0.12) 0%, rgba($color-primary, 0.05) 100%);
    }

    .set-title {
      color: $color-primary;
    }
  }

  .card-header {
    padding: 20px 20px 16px;
    border-bottom: 1px solid $border-color-lighter;
    position: relative;
    z-index: 1;

    .set-title {
      font-size: $font-size-lg;
      font-weight: $font-weight-bold;
      color: $color-text-primary;
      margin: 0;
      line-height: $line-height-normal;
      @include text-clamp(2);
      transition: color $transition-fast;
      min-height: 48px;
      padding-right: 60px;
    }
  }

  .card-body {
    padding: $spacing-lg $spacing-lg $spacing-md;
    flex: 1;
    display: flex;
    flex-direction: column;

    .set-description {
      color: $color-text-secondary;
      font-size: $font-size-sm;
      line-height: $line-height-relaxed;
      margin-bottom: $spacing-lg;
      height: 44px;
      @include text-clamp(2);
    }

    .stats-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: auto;
      padding: $spacing-md;
      background: $bg-color-hover;
      border-radius: $border-radius-base;

      .stat-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        flex: 1;

        .stat-icon {
          font-size: 18px;
          color: $color-primary;
        }

        .stat-value {
          font-size: $font-size-lg;
          font-weight: $font-weight-bold;
          color: $color-text-primary;
        }

        .stat-label {
          font-size: $font-size-xs;
          color: $color-text-tertiary;
          font-weight: $font-weight-medium;
        }
      }

      .stat-divider {
        width: 1px;
        height: 32px;
        background: $border-color-light;
      }
    }
  }

  .card-footer {
    padding: $spacing-md $spacing-lg;
    border-top: 1px solid $border-color-lighter;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(180deg, rgba($color-primary, 0.02) 0%, white 100%);

    .footer-left {
      display: flex;
      align-items: center;
      gap: $spacing-sm;
      flex: 1;
      min-width: 0;

      .creator-avatar {
        flex-shrink: 0;
        background: linear-gradient(135deg, $color-primary 0%, color.adjust($color-primary, $lightness: -10%) 100%);
        color: white;
        font-weight: $font-weight-bold;
      }

      .creator-name {
        font-size: $font-size-sm;
        color: $color-text-secondary;
        font-weight: $font-weight-medium;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .footer-right {
      flex-shrink: 0;

      .time {
        font-size: $font-size-xs;
        color: $color-text-quaternary;
        white-space: nowrap;
      }
    }
  }
}
</style>
